<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/all.min.css">
    <title>MBTI 后台管理系统</title>
    <style>
       body {
        display: flex;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 苹果系统字体 */
    }
    .sidebar {
        min-width: 250px;
        background-color: #343a40;
        color: #f8f9fa; /* 更柔和的字体颜色 */
        height: 200vh;
        padding: 20px;
        transition: background-color 0.3s;
        border-right: 1px solid #495057;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }
    .sidebar h2 {
        color: #ffffff;
        font-size: 1.8rem; /* 增加标题字体大小 */
        margin-bottom: 20px;
        font-weight: 600; /* 加粗 */
    }
    .nav-link {
        color: #e0e0e0; /* 更柔和的链接颜色 */
        transition: background-color 0.3s, color 0.3s; /* 添加颜色过渡效果 */
        font-size: 1.1rem;
        padding: 10px 15px;
        border-radius: 5px;
    }
    .nav-link:hover {
        background-color: #495057;
        color: #ffffff; /* 悬停时字体颜色 */
    }
    .nav-link.active {
        background-color: #007bff; /* 选中颜色 */
        color: #ffffff; /* 选中时字体颜色 */
    }
    .content {
        flex-grow: 1;
        padding: 20px;
        padding-bottom: 70px; /* 为底部导航栏留出更多空间 */
    }
    iframe {
        width: 100%;
        height: 100%;
        border: none; /* 移除边框 */
    }
      .pagination {
           display: flex;
           justify-content: center; /* 居中对齐 */
           padding: 10px 0; /* 上下内边距 */
           list-style: none; /* 移除默认列表样式 */
       }

       .pagination li {
           margin: 0 5px; /* 每个分页项之间的间距 */
       }

       .pagination a, .pagination span {
           display: inline-block;
           padding: 8px 12px; /* 内边距 */
           border: 1px solid #007bff; /* 边框颜色 */
           border-radius: 4px; /* 圆角 */
           color: #007bff; /* 链接颜色 */
           text-decoration: none; /* 移除下划线 */
           transition: background-color 0.3s, color 0.3s; /* 过渡效果 */
       }

       .pagination a:hover {
           background-color: #007bff; /* 悬停时背景颜色 */
           color: #ffffff; /* 悬停时字体颜色 */
       }

       .pagination .active span {
           background-color: #007bff; /* 当前页的背景颜色 */
           color: #ffffff; /* 当前页的字体颜色 */
           border: 1px solid #007bff; /* 边框颜色 */
       }

       .pagination .disabled span {
           color: #6c757d; /* 禁用状态的字体颜色 */
           border: 1px solid #6c757d; /* 禁用状态的边框颜色 */
           cursor: not-allowed; /* 禁用状态的光标样式 */
       }
    </style>
</head>
<body>
    <div class="sidebar">
        <h2>
            MBTI 后台
            <a id="logoutButton" class="btn btn-danger" href="/admins/logout">退出</a>
        </h2>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="toggleSubMenu('questionManagement'); setActive(this)">
                    <i class="fas fa-question-circle"></i> 题目管理
                </a>
                <ul class="nav flex-column ml-3" id="questionManagement" style="display: none;">
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="showQuestions(); setActive(this)">
                            <i class="fas fa-list"></i> 题目列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="showUserReports(); setActive(this)">
                            <i class="fas fa-chart-bar"></i> 用户报告
                        </a>
                    </li>

                </ul>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="toggleSubMenu('newsManagement'); setActive(this)">
                    <i class="fas fa-newspaper"></i> 资讯管理
                </a>
                <ul class="nav flex-column ml-3" id="newsManagement" style="display: none;">
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="showNews(); setActive(this)">
                            <i class="fas fa-list"></i> 资讯列表
                        </a>
                    </li>
                </ul>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="showSettings(); setActive(this)">
                    <i class="fas fa-cog"></i> 配置设置
                </a>
            </li>
        </ul>
    </div>
    <div class="content">
        <div id="mainContent">
            <h2>最近2日IP访问量</h2>
            <table class="table">
                <thead>
                <tr>
                    <th>访问日期</th>
                    <th>IP</th>
                    <th>地区</th>
                    <th>访问日期</th>
                    <th>IP</th>
                    <th>地区</th>
                </tr>
                </thead>
                <tbody id="questionTableBody">
                {volist name="$rs" id="vo"}
                <tr>
                    <td>{$vo.ip1_create_time}</td>
                    <td>{$vo.ip1}</td>
                    <td>{$vo.area1}</td>
                     <td>{$vo.ip2_create_time}</td>
                    <td>{$vo.ip2}</td>
                    <td>{$vo.area2}</td>
                </tr>

                {/volist}
                </tbody>
            </table>
            <ul class="pagination">
                {$list|raw}
                <b style="margin-top: 20px;margin-left: 10px;">总数：{$list->total()}</b>
            </ul>
        </div>
        <iframe id="newsFrame" style="display:none;" src="{:url('/admins/news')}"></iframe>
        <iframe id="settingsFrame" style="display:none;" src="{:url('/admins/conf')}"></iframe>
        <iframe id="questionsFrame" style="display:none;" src="{:url('/admins/topic')}"></iframe>
        <iframe id="downloadFrame" style="display:none;" src=""></iframe>
        <iframe id="userReportsFrame" style="display:none;" src="{:url('/admins/reports')}"></iframe>
    </div>
    <script>
        // // 默认显示资讯列表
        // window.onload = function() {
        //     showNews();
        // };
        function toggleSubMenu(menuId) {
            const submenu = document.getElementById(menuId);
            submenu.style.display = submenu.style.display === 'none' ? 'block' : 'none';
        }

        function showContent(content) {
            const mainContent = document.getElementById('mainContent');
            const newsFrame = document.getElementById('newsFrame');
            const settingsFrame = document.getElementById('settingsFrame');
            const questionsFrame = document.getElementById('questionsFrame'); // 新增的 iframe
            switch (content) {
                case 'questionList':
                    mainContent.innerHTML = '<h2>题目列表</h2><p>这里是题目列表的内容。</p>';
                    newsFrame.style.display = 'none'; // 隐藏 iframe
                    settingsFrame.style.display = 'none'; // 隐藏 iframe
                    questionsFrame.style.display = 'none'; // 隐藏题目 iframe
                    break;
                default:
                    mainContent.innerHTML = '<p>请选择左侧菜单项以查看内容。</p>';
                    newsFrame.style.display = 'none'; // 隐藏 iframe
                    settingsFrame.style.display = 'none'; // 隐藏 iframe
                    questionsFrame.style.display = 'none'; // 隐藏题目 iframe
            }
        }

        function showNews() {
            const mainContent = document.getElementById('mainContent');
            const newsFrame = document.getElementById('newsFrame');
            mainContent.innerHTML = ''; // 清空内容
            newsFrame.style.display = 'block'; // 显示 iframe
            document.getElementById('settingsFrame').style.display = 'none'; // 隐藏设置 iframe
            document.getElementById('questionsFrame').style.display = 'none'; // 隐藏题目 iframe
            document.getElementById('userReportsFrame').style.display = 'none'; // 隐藏用户报告 iframe
            document.getElementById('downloadFrame').style.display = 'none'; // 隐藏下载 iframe
        }

        function showQuestions() {
            const mainContent = document.getElementById('mainContent');
            const questionsFrame = document.getElementById('questionsFrame');
            mainContent.innerHTML = ''; // 清空内容
            questionsFrame.style.display = 'block'; // 显示题目 iframe
            document.getElementById('newsFrame').style.display = 'none'; // 隐藏新闻 iframe
            document.getElementById('settingsFrame').style.display = 'none'; // 隐藏设置 iframe
            document.getElementById('userReportsFrame').style.display = 'none'; // 隐藏用户报告 iframe
            document.getElementById('downloadFrame').style.display = 'none'; // 隐藏下载 iframe
        }

        function download() {
            const mainContent = document.getElementById('mainContent');
            const questionsFrame = document.getElementById('downloadFrame');
            mainContent.innerHTML = ''; // 清空内容
            questionsFrame.style.display = 'block'; // 显示题目 iframe
            document.getElementById('newsFrame').style.display = 'none'; // 隐藏新闻 iframe
            document.getElementById('settingsFrame').style.display = 'none'; // 隐藏设置 iframe
            document.getElementById('userReportsFrame').style.display = 'none'; // 隐藏用户报告 iframe
            document.getElementById('questionsFrame').style.display = 'none'; // 隐藏题目 iframe
        }

        function showSettings() {
            const mainContent = document.getElementById('mainContent');
            const settingsFrame = document.getElementById('settingsFrame');
            mainContent.innerHTML = ''; // 清空内容
            settingsFrame.style.display = 'block'; // 显示 iframe
            document.getElementById('newsFrame').style.display = 'none'; // 隐藏新闻 iframe
            document.getElementById('questionsFrame').style.display = 'none'; // 隐藏题目 iframe
            document.getElementById('userReportsFrame').style.display = 'none'; // 隐藏用户报告 iframe
            document.getElementById('downloadFrame').style.display = 'none'; // 隐藏下载 iframe
        }

        function showUserReports() {
            const mainContent = document.getElementById('mainContent');
            const userReportsFrame = document.getElementById('userReportsFrame');
            mainContent.innerHTML = ''; // 清空内容
            userReportsFrame.style.display = 'block'; // 显示用户报告 iframe
            document.getElementById('newsFrame').style.display = 'none'; // 隐藏新闻 iframe
            document.getElementById('settingsFrame').style.display = 'none'; // 隐藏设置 iframe
            document.getElementById('questionsFrame').style.display = 'none'; // 隐藏题目 iframe
            document.getElementById('downloadFrame').style.display = 'none'; // 隐藏下载 iframe
        }

        function setActive(element) {
            // 移除所有链接的 active 类
            const links = document.querySelectorAll('.nav-link');
            links.forEach(link => link.classList.remove('active'));
            // 为当前点击的链接添加 active 类
            element.classList.add('active');
        }
    </script>
</body>
</html>